<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <el-button type="primary" @click="openDialog">新增</el-button>
            </div>
        </div>
        <CustomTable class="mt-4" :data="bannerList">
            <el-table-column type="index" width="60" label="序号" />

            <el-table-column label="商品图片">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.bannerUrl" fit="cover" />

                </template>
            </el-table-column>

            <el-table-column label="操作" width="200px">
                <template #default="{ row }">
                    <el-button text type="primary" @click="openEdit(row)">编辑</el-button>
                    <el-button text type="primary" @click="delRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </CustomTable>
        <CustomDialog v-model:show="bannerDialog" :title="(isEdit ? '修改' : '新增') + '轮播图'" width="600px"
            @cancel="cancelDialog" @confirm="submitForm">
            <el-form ref="formRef" :model="bannerForm" label-width="auto">
                <el-form-item label="图片" prop="bannerUrl">
                    <SingleUpload v-model="bannerForm.bannerUrl">
                    </SingleUpload>
                </el-form-item>
            </el-form>
        </CustomDialog>
    </div>
</template>

<script setup lang="ts">
import {
    addBanner,
    updateBanner,
    delBanner,
    getBannerList,
} from '@/apis/banner'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import CustomTable from '@/components/CustomTable.vue'
import SingleUpload from '@/components/SingleUpload.vue'

import CustomDialog from '@/components/CustomDialog.vue'

const bannerDialog = ref(false)
const bannerList = ref([])
const bannerForm = reactive({
    bannerUrl: ''
})

const getBanners = async () => {
    const res = await getBannerList()
    bannerList.value = res
}
const isEdit = ref(false)
const openDialog = () => {
    bannerDialog.value = true
}
const cancelDialog = () => {
    bannerDialog.value = false
}
const editTarget = ref()
const openEdit = (row) => {
    isEdit.value = true
    bannerDialog.value = true
    Object.assign(bannerForm, {
        bannerUrl: row.bannerUrl
    })
    editTarget.value = row
}

const submitForm = async () => {
    bannerDialog.value = false
    if (isEdit.value) {
        await updateBanner({
            id: editTarget.value.id,
            bannerUrl: bannerForm.bannerUrl
        })
        ElMessage.success("编辑成功")

    } else {
        await addBanner({
            bannerUrl: bannerForm.bannerUrl
        })
        ElMessage.success("添加成功")
    }

    getBanners()

}
const delRow = async (row) => {
    await delBanner(row.id)
    ElMessage.success("删除成功")
    getBanners()
}
onMounted(() => {
    getBanners()
})
</script>

<style scoped></style>